<template>
  <div class="body">
    <div class="loginCard">
      <Card :bordered="false">
        <p slot="title">登录</p>

        <div class="login-card-user-and-pwd">
          <div>
            <span>用户名:</span>
            <Input
              type="text"
              v-model="user.userName"
              placeholder="请输入用户名"
              prefix="ios-person-outline"
            />
          </div>
          <div style="login-card-pwd">
            <span>密码:</span>
            <Input
              type="password"
              v-model="user.password"
              placeholder="请输入密码"
              prefix="ios-lock-outline"
            />
          </div>
        </div>
        <div class="login-btn">
          <Button type="primary" long @click="login">登录</Button>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  components: {},
  data() {
    return {
      user: {
        userName: "",
        password: ""
      }
    };
  },
  methods:{
    login: function() {
      this.$router.push('/home')
/*           this.$post('/user/login', this.user).then(result => {
            result === true ? this.$router.push('/home') : alert('用户名或密码错误!');
          }).catch(error => {
            alert('网络错误');
          }); */
    }
  }
};
</script>

<style scoped>
.body {
  background-color: #c5c8ce;
  height: 100vh;
}
.loginCard {
    width: 400px;
    position: absolute;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.login-card-user-and-pwd {
  width: 75%;
}
.login-card-pwd {
  margin-top: 30px;
}
.login-card-user-and-pwd div div {
  margin-left: 60px;
}
span {
  position: relative;
  top: 26px;
}
.login-btn {
  margin-top: 25px;
  width: 74%;
  margin-left: 17%;
}
</style>